<template>
  <el-autocomplete
    class="search no-drag"
    flex-box="1"
    placeholder="搜索音乐，视频，歌词，电台"
    v-model="searchValue"
    :fetch-suggestions="querySearch"
    @select="handleSelect"
  >
    <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"></i>
    <template slot-scope="{ item }">
      <!-- <span class="id">{{ item.id }} {{ item.name }}</span> -->
      <div>{{item.first}}</div>
    </template>
  </el-autocomplete>
</template>
<script>
import { searchHot, searchHotDetail } from '@/api'
export default {
  data() {
    return {
      timer: null,
      searchValue: '',
      searchHotDate: [],
      remoteSearchList: []
    }
  },
  methods: {
    handleSelect(item) {
      this.searchValue = item.first
    },
    handleIconClick() {},
    querySearch(queryString, cb) {
      if (queryString === '') {
        if (this.searchHotDate.length > 0) {
          cb(this.searchHotDate)
        } else {
          searchHot().then(res => {
            console.log('热搜 res: ', res)
            this.searchHotDate = res.result.hots
            cb(this.searchHotDate)
          })
        }
      } else {
        cb([])
      }
      // console.log(' queryString: ', queryString)
      // let res = this.remoteSearchList.filter(itme =>
      //   itme.name.includes(queryString)
      // )
      // // cb(res)
      // clearTimeout(this.timer)
      // this.timer = setTimeout(() => {
      //   cb(res)
      // }, 3000 * Math.random())
    }
  }
}
</script>

<style lang="scss">
.search {
  $height: 26px;
  width: 210px;
  overflow: hidden;
  margin-left: 10px;
  border-radius: 20px;
  .el-input__inner {
    height: $height;
    line-height: $height;
    font-size: 12px;
    border: none;
    outline: none;
    color: #fff;
    background-color: rgba($color: #000000, $alpha: 0.15);
  }
  .el-input__suffix {
    top: -6px;
    cursor: pointer;
    i {
      font-size: 12px;
    }
  }
  .el-input__suffix:hover {
    color: #fff;
  }
}
</style>